<template>
  <div class="rechage-item">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm"
      label-position="left">
      <el-form-item label="充值金额：" prop="paymentAmount">
        <el-input v-model="ruleForm.paymentAmount" class="w-50 m-2" placeholder="请输入充值金额" size="small"
          style="width: 420px">
          <template #suffix> 元 </template>
        </el-input>
      </el-form-item>
      <el-form-item label="支付方式：" prop="paymentMethod" class="paymentMethod">
        <div class="pay-item" v-for="item in paymentMethodArr">
          <div class="pay-title">{{ item.title }}</div>
          <ul class="pay-way">
            <li v-for="way in item.child" :class="{ active: way.id === ruleForm.paymentMethod }"
              @click="ruleForm.paymentMethod = way.id">
              <svg-icon icon="selected" class-name="selected-icon" v-show="way.id === ruleForm.paymentMethod" />
              <span>{{ way.text }}</span>
            </li>
          </ul>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">开始充值</el-button>
      </el-form-item>
    </el-form>

    <div class="warnings">
      <div class="left">!</div>
      <div class="right">
        <div style="color: #ff7500; font-size: 14px; margin-left: 20px">温馨提示：</div>
        <span>1. 支付过程中浏览器会有几次跳转，支付完成之前请勿关闭浏览器，否则可能造成支付失败</span>
        <span>2. 如充值后款项没有到账请联系管理员帮助处理。</span>
      </div>
    </div>
    <code-dialog :is-show="ishow" @changeIsShow="changeIsShow"></code-dialog>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance, FormRules } from 'element-plus'
import { paymentMethodArrs } from './data'
import codeDialog from './CodeDialog.vue'
interface RechageData {
  userId: string
  paymentMethod: string
  paymentAmount: number | string
  couponId?: string
}

const ruleFormRef = ref<FormInstance>()

const paymentMethodArr = paymentMethodArrs

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入充值金额'))
  }
  if (isNaN(value)) {
    callback(new Error('必须为数字'))
  } else {
    if (!/(^[1-9]{1}[0-9]*([.]{1}[0-9]{1}[0-9]{0,1})$)|(^[1-9]{1}([0-9]*)$)|(^[0]{1}([.]{1}[0-9]{1}[0-9]{0,1})$)/.test(value) || value <= 0) {
      callback(new Error('金额错误'))
    } else {
      callback()
    }
  }
}

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('支付方式错误'))
  } else {
    callback()
  }
}

const ruleForm = reactive<RechageData>({
  userId: localStorage.getItem('userId') as string,
  paymentMethod: '1',
  paymentAmount: ''
})

const rules = reactive<FormRules>({
  paymentMethod: [{ validator: validatePass2, trigger: 'blur' }],
  paymentAmount: [{ validator: checkAge, trigger: 'blur' }]
})
const ishow = ref(false)

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      ishow.value = true
      ruleForm.paymentAmount = parseFloat(ruleForm.paymentAmount)
      sessionStorage.setItem('ruleForm', JSON.stringify(ruleForm))
    } else {
      return false
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const changeIsShow = () => {
  ishow.value = false
}
</script>

<style lang="scss" scoped>
.rechage-item {
  margin-top: 40px;

  :deep(.paymentMethod .el-form-item__content) {
    display: block;
  }

  .pay-item {
    .pay-title {
      font-size: 14px;
      color: var(--el-text-color-primary);
    }
  }

  ul {
    display: flex;

    li {
      width: 200px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      list-style: none;
      border: 1px solid $border-color;
      cursor: pointer;
      position: relative;

      .selected-icon {
        position: absolute;
        top: -3px;
        left: 0;
      }
    }

    li+li {
      margin-left: 20px;
    }

    .active {
      border: 1px solid $main-color;
    }
  }

  .warnings {
    height: 140px;
    display: flex;
    align-items: center;
    margin: 36px 30px 0;
    background: rgba(255, 117, 0, 0.1);
    border-left: 4px solid #ff7500;

    .left {
      width: 44px;
      height: 44px;
      border: 3px solid #ff7500;
      color: #ff7500;
      font-size: 36px;
      text-align: center;
      line-height: 44px;
      border-radius: 50%;
      margin-left: 24px;
    }

    .right {
      div {
        margin-bottom: 10px;
      }

      span {
        display: block;
        font-size: 14px;
        color: #556279;
        margin-left: 20px;

        span {
          margin: 0;
          display: inline;
          color: $main-color;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
